<template>
	<view @touchmove.stop class="_flex-row-center-mid _w-max _h-max _pos-fixed _top _left _z-index-3" style="background-color: rgba(0,0,0,0.3);" v-if="picker_modal">
		<view class="time-picker-modal">
		  <view class="acea-row">
		    <view class="time-type ptb-10" 
			:class="{
				'active':time_type==0,
				'display-none':nav_type!=2&&nav_type!=0,
			}" 
			:style="nav_type!=0?'width:100%;':''"
			@click="chooseType(0)">
		      <view class="fs-12 mb-3">取车时间</view>
		      <view class="fs-12">
		        {{date_list[start_time[0]].month}}月{{date_list[start_time[0]].date}}日{{time_list[start_time[1]]}}</view>
		    </view>
		    <view class="time-type ptb-10" 
			:class="{
				'active':time_type==1,
				'display-none':nav_type!=1&&nav_type!=0,
			}" 
			:style="nav_type!=0?'width:100%;':''"
			@click="chooseType(1)">
		      <view class="fs-12 mb-3">还车时间</view>
		      <view class="fs-12">{{date_list[end_time[0]].month}}月{{date_list[end_time[0]].date}}日{{time_list[end_time[1]]}}
		      </view>
		    </view>
		  </view>
		  <block v-if="time_type==0">
		    <picker-view class="time-picker" indicator-class="time-picker-item" @change='pickStart' :value="start_time">
		      <picker-view-column>
		        <view v-for="(item,index) in date_list" v-if="index != date_list.length-1" class="time-picker-item">{{item.month}}月{{item.date}}日 {{item.day}}</view>
		      </picker-view-column>
		      <picker-view-column>
		        <view v-for="(item,index) in time_list" class="time-picker-item">{{item}}</view>
		      </picker-view-column>
		    </picker-view>
		  </block>
		  
		  <block v-if="time_type==1">
		    <picker-view class="time-picker" indicator-class="time-picker-item" @change='pickEnd' :value="end_time">
		      <picker-view-column>
		        <view v-for="(item,index) in date_list"  class="time-picker-item">{{item.month}}月{{item.date}}日 {{item.day}}</view>
		      </picker-view-column>
		      <picker-view-column>
		        <view v-for="(item,index) in time_list" class="time-picker-item">{{item}}</view>
		      </picker-view-column>
		    </picker-view>
		  </block>
		  <view class="modal-btn-box acea-row">
		    <view class="modal-btn"  @click="cancel">取消</view>
		    <view class="modal-btn c-red"  @click="showTimePicker">确定</view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				picker_modal: false, //显示时间弹窗
				start_time: [], //取车时间
				end_time: [], //还车时间
				date_list: [], //日期列表
				time_list: [], //时间列表
				time_type: 0, //时间选择类型 0取车 1还车
				nav_type:0,//1显示还车时间、2显示取车时间、0全部显示
			}
		},
		methods:{
			// 获取日期
			getDay(day) {
			    var that = this;
			    var date_list = [];
			    for (let i = 0; i < day; i++) {
			      date_list.push(that.dealTime(i));
			    }
			    that.date_list = date_list;
			},
			//计算天数
			dealTime(num) { // num：未来天数
			    var time = new Date(); // 获取当前时间日期
			    var date = new Date(time.setDate(time.getDate() + num)).getDate(); //这里先获取日期，在按需求设置日期，最后获取需要的
			    var year = time.getFullYear();
			    var month = time.getMonth() + 1; // 获取月份
			    var day = time.getDay(); //  获取星期
			    switch (day) { //  格式化
			      case 0:
			        day = "星期日"
			        break
			      case 1:
			        day = "星期一"
			        break
			      case 2:
			        day = "星期二"
			        break
			      case 3:
			        day = "星期三"
			        break
			      case 4:
			        day = "星期四"
			        break
			      case 5:
			        day = "星期五"
			        break
			      case 6:
			        day = "星期六"
			        break
			    }
			    if (month < 10) {
			      month = 0 + "" + month;
			    }
			    if (date < 10) {
			      date = 0 + "" + date;
			    }
			    var obj = {
			      year: year,
			      month: month,
			      date: date,
			      day: day,
			    }
			    return obj // 返回对象
			},
			
			chooseType(e) {
			    this.time_type = e;
			},
			
			//选择取车时间
			pickStart(e) {
			    var val = e.detail.value,
			      start_val = this.start_val;
			    // if (val[0] == 0) {
			    //   if (val[1] < start_val[1]) {
			    //     this.start_time = start_val;
			    //     uni.showToast({title:'选择时间已过期',icon:"none"})
			    //     return;
			    //   }
			    // }
			    this.start_time = val;
			    this.end_time = [val[0]+1, val[1]];
			},
			
			//选择还车时间
			pickEnd(e) {
			    var val = e.detail.value;
			    var start_time = this.start_time;
			  //   if (val[0] < start_time[0]) {
			  //       this.end_time= [start_time[0] + 1, start_time[1]];
					// uni.showToast({title:'还车时间不能在取车时间之前',icon:"none"})
					// return
			  //   }
			  //   if (val[0] == start_time[0]) {
			  //     if (val[1] <= start_time[1]) {
					// 	this.end_time= [start_time[0] + 1, start_time[1]];
					// 	uni.showToast({title:'还车时间不能在取车时间之前',icon:"none"})
					// 	return
					// }
			  //   }
			   this.end_time = val
			},
			
			//计算时间
			calTimes() {
			    var list = [],
			      h = '',
			      time = new Date(Date.parse(new Date()) ), //  + 7200000 date对象  当前时间加上两个小时 
			      now_h = time.getHours(), //当前小时
			      now_m = time.getMinutes(), //当前分钟
			      start_val = [0]; //取车起始值
			    for (let i = 0; i < 24; i++) {
			      h = i + '';
			      if (i < 10) {
			        h = 0 + h;
			      }
			      //可选时间 早上8点到晚上10点
			      if (Number(h)>=8 && Number(h)<=22 ) {
			        list.push(h + ":00");
			        if(Number(h)!=22){
			          list.push(h + ":30");
			        }
			      }
			     
			      //设置起始时间
			      if (now_h == i) {
			        if (now_m < 30) {
			          start_val.push(list.length - 1);
			        } else {
			          start_val.push(list.length);
			        }
			      }
			    }
				
			    this.time_list = list;
				this.start_time = start_val;
				this.end_time = [start_val[0]+1, start_val[1]];
			    // this.setData({
			    //   start_val: start_val,
			    //   start_time: start_val,
			    //   end_val: [start_val[0] + 1, start_val[1]],
			    //   end_time: [start_val[0] + 1, start_val[1]]
			    // })
			},
			
			//显示时间选择弹窗
			showTimePicker(e) {
			    var type = e.currentTarget.dataset.type ? e.currentTarget.dataset.type : 0;
				this.time_type = type
				let that = this;
				let date = {};
				this.start_time, //取车时间
				this.end_time, //还车时间
				date.starTime = {
					year:that.date_list[that.start_time[0]].date.year,
					date:that.date_list[that.start_time[0]],
					time:that.time_list[that.start_time[1]],
					starTime:that.start_time
				}
				date.endTime = {
					year:that.date_list[that.end_time[0]].date.year,
					date:that.date_list[that.end_time[0]],
					time:that.time_list[that.end_time[1]],
					endTime:that.end_time
				}
				
				this.$emit('getTime',date);
			},
			
			//
			cancel(){
				this.picker_modal = false;
			},
		},
	}
</script>

<style scoped lang="scss">
.acea-row{display:flex;flex-wrap:wrap;}
.ptb-10{padding-top: 20rpx;padding-bottom: 20rpx;}
.fs-12{font-size: 24rpx;}
.mb-3{margin-bottom: 6rpx;}
.display-none{display: none;}
.w-max{width: 100%;}
/* 时间选择弹窗 */
.time-picker-modal{
  width: 600rpx;
  background: #fff;
  overflow: hidden;
  border-radius: 20rpx;
}
.time-picker-modal .time-type{
  width: 50%;
  background: #F2F2F2;
  text-align: center;
  color: #666;
}
.time-picker-modal .time-type.active{
  background: #BE9D78;
  color: #fff;
}
.time-picker-modal .modal-btn-box{
border-top: 1px solid #ECECEC;
}
.time-picker-modal .modal-btn{
  line-height: 86rpx;
  flex: 1;
  text-align: center;
  border-right: 1px solid #ECECEC;
}
.time-picker-modal .modal-btn:last-child{
  border: none;
}
.time-picker-modal .time-picker{
  width: 100%;
  height: 400rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.time-picker-item{
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.nav_type {
	
}
</style>